<template>
    <div class="group_info_case">
        <div class="info_chang_search">
            <div class="tabs">
                当前位置：
                <span @click="$router.push({name: 'home'})">首页 > </span>
                <span @click="$router.push({name: 'groups'})">产品商城</span>
                <span @click="routerCuse(item,index)" v-for="(item,index) in p_info">
                    {{item.name != '' ? '>' : ''}}
                    {{item.name}}
                </span>
            </div>
            <search-box></search-box>
        </div>
        <div class="chang_box_list">
            <div class="filter">
                <div class="box_filter" v-for="(item,index) in filter" :key="index">
                    <div class="par_title">{{ item.name }}：</div>
                    <div class="chang_filter_box">
                        <div class="child_title" @click="changFliter(index,indexs)" :class="{'activeChilid':items.childCheck}"
                             v-for="(items,indexs) in item.child" :key="indexs">{{ items.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="group_list">
                <div class="filter_list_chang" v-if="filterArrBackend.length">
                    <div class="box_filter_list">
                        <div class="parint" v-if="item.parentCheck" v-for="(item,index) in filter" :key="index">
                            <div class="par_name_info">{{ item.name }}：{{ item.parentCheckNum }}</div>
                            <div class="chilid_list" @click="changFliter(index,indexs)" v-if="items.childCheck"
                                 v-for="(items,indexs) in item.child" :key="indexs">
                                <span>{{ items.name }}</span>
                                <img src="../assets/window-icon-close-black.png">
                            </div>
                        </div>
                    </div>
                    <div @click="clearFilter" class="box_clear">清空筛选</div>
                </div>
                <div v-if="currentGroup.id" class="category-info">
                    <div class="cate-title">
                        <img class="cate-title-icon" :src="currentGroup.icon"/>
                        <div class="cate-title-main">{{currentGroup.name}}</div>
                    </div>
                    <div class="cate-info">{{currentGroup.info}}</div>
                </div>
                <div :class="{'active_box':filterArrBackend.length<=0}" class="info_box_list">
                    <div class="box_hout_info" @click="goDetails(item.id)" v-for="(item,index) in product" :key="index">
                        <div class="box_img">
                            <img :src="item.cover" class="img_box">
                        </div>
                        <div class="title_json">
                            <div class="titles">{{ item.name }}</div>
                            <div class="jsons">{{ item.info }}</div>
                        </div>
                    </div>
                </div>
                <div class="block">
                    <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="limit"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {getGroupGoodsList, getGroupScreen} from "@/api/apis";
    import SearchBox from "@/components/searchBox";

    export default {
        name: "groupTwoHome",
        components: {SearchBox},
        data() {
            return {
                filter: [],
                currentPage: 1,
                limit: 16,
                total: 0,
                filterArrBackend: [],
                group_id: [],
                product: [],
                p_info: [],
                currentGroup: {}
            }
        },
        mounted() {
            if (this.$route.query.group_id) {
                this.group_id = this.$route.query.group_id
            }
            this.GetGroupScreen()
            this.GetGroupGoodsList()
        },
        methods: {
            routerCuse(e) {
                if (parseInt(e.id) > 0) {
                    if (e.is_end == 1) {
                        this.$router.push({name: 'filterGroups', query: {group_id: e.id}});
                    } else {
                        this.$router.push({name: 'groups', query: {group_id: e.id}});
                    }
                }
            },
            goDetails(e) {
                this.$router.push({name: 'productDetails', query: {goods_id: e}})
            },
            handleCurrentChange(e) {
                this.currentPage = e
                this.GetGroupGoodsList()
            },
            //获取当前的分类筛选项
            GetGroupScreen() {
                let data = {group_id: this.group_id}
                getGroupScreen(data).then(res => {
                    this.filter = res.data.list;
                    this.p_info = res.data.p_info;
                    this.currentGroup = JSON.parse(JSON.stringify(res.data.p_info)).pop();
                })
            },
            GetGroupGoodsList() {
                let data = {group_id: this.group_id, screen: this.filterArrBackend, page: this.currentPage, limit: this.limit}
                getGroupGoodsList(data).then(res => {
                    this.product = res.data.data
                    this.total = res.data.total
                })
            },
            clearFilter() {
                this.filterArrBackend = []
                this.filter.map(item => {
                    item.parentCheck = false
                    item.child.map(items => {
                        items.childCheck = false
                    })
                })
                this.GetGroupGoodsList()
            },
            changFliter(parentIndex, childIndex) {
                this.filter[parentIndex].child[childIndex].childCheck = !this.filter[parentIndex].child[childIndex].childCheck
                this.selectionScreen()
                this.fliterArr()
            },
            //筛选数据是否有选中的
            selectionScreen() {
                this.filter.map(item => {
                    let filter = item.child.filter(this.checkAdult)
                    if (filter.length > 0) {
                        item.parentCheck = true
                    } else {
                        item.parentCheck = false
                    }
                })
            },
            //设置子数组的筛选条件
            checkAdult(item) {
                return item.childCheck == true;
            },
            //处理成后台需要的数组
            fliterArr() {
                this.filterArrBackend = []
                this.filter.map(item => {
                    item.child.map(items => {
                        if (items.childCheck) {
                            let object = {}
                            object[item.id] = items.name
                            this.filterArrBackend.push(object)
                        }
                    })
                })
                this.GetGroupGoodsList()
            }
        },
        watch: {
            $route(to, from) {
                if (to.query.group_id != from.query.group_id) {
                    if (this.$route.query.group_id) {
                        this.group_id = this.$route.query.group_id
                    }
                    this.GetGroupScreen()
                    this.GetGroupGoodsList()
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .group_info_case {
        width: 1200px;
        margin: 0 auto;
        padding: 11px 0 40px;
        
        .info_chang_search {
            width: 1200px;
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 33px;
            
            .tabs {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
            }
            
        }
        
        .chang_box_list {
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            
            .filter {
                width: 217px;
                padding: 19px 21px;
                max-height: 924px;
                background: #FFFFFF;
                border: 1px solid #E9E9E9;
                box-sizing: border-box;
                overflow: scroll;
                
                .box_filter {
                    margin-bottom: 14px;
                    
                    .par_title {
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #000000;
                    }
                    
                    .chang_filter_box {
                        margin-top: 18px;
                        
                        .child_title {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #9D9D9D;
                            margin-bottom: 20px;
                        }
                        
                        .activeChilid {
                            color: #B11E24;
                        }
                        
                        .child_title:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
            
            .filter::-webkit-scrollbar { /*滚动条整体样式*/
                width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
                height: 1px;
            }
            
            .filter::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                border-radius: 10px;
                background: #535353;
            }
            
            .filter::-webkit-scrollbar-track { /*滚动条里面轨道*/
                border-radius: 10px;
                background: #EDEDED;
            }
            
            .group_list {
                width: 955px;
                background: #FFFFFF;
                
                .filter_list_chang {
                    padding: 21px 20px 14px;
                    border: 1px solid #E9E9E9;
                    
                    .box_filter_list {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        
                        .parint {
                            display: flex;
                            align-items: center;
                            margin-bottom: 12px;
                            
                            .par_name_info {
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #000000;
                            }
                            
                            .chilid_list {
                                background: #FFFFFF;
                                border: 1px solid #C7C7C7;
                                padding: 6px;
                                margin-right: 15px;
                                display: flex;
                                align-items: center;
                                
                                span {
                                    font-size: 12px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #C7C7C7;
                                    margin-right: 12px;
                                }
                                
                                img {
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }
                    }
                    
                    .box_clear {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        text-align: right;
                    }
                }
                
                .category-info {
                    margin-bottom: 28px;
                    
                    .cate-title {
                        display: flex;
                        align-items: center;
                        margin-bottom: 9px;
                        
                        .cate-title-icon {
                            width: 30px;
                            height: 28px;
                            margin-right: 12px;
                        }
                        
                        .cate-title-main {
                            font-size: 20px;
                            font-weight: bold;
                            color: #000000;
                        }
                    }
                    
                    .cate-info {
                        color: #9D9D9D;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }
                
                .info_box_list {
                    margin-top: 29px;
                    display: flex;
                    flex-wrap: wrap;
                    
                    .box_hout_info {
                        width: 217px;
                        margin-right: 27px;
                        margin-bottom: 27px;
                        
                        .box_img {
                            height: 150px;
                            background: rgba(0, 0, 0, 0);
                            border: 1px solid #E9E9E9;
                            box-sizing: border-box;
                            
                            .img_box {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        
                        .title_json {
                            margin: 10px auto 0;
                            
                            .titles {
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #000000;
                                margin-bottom: 8px;
                            }
                            
                            .jsons {
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                line-height: 20px;
                                color: #000000;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 3;
                                white-space: pre-wrap;
                                -webkit-box-orient: vertical;
                            }
                        }
                    }
                    
                    .box_hout_info:nth-child(4n) {
                        margin-right: 0;
                    }
                    
                    .box_hout_info:hover {
                        .box_img {
                            border-color: #B11E24;
                        }
                        
                        .title_json {
                            .titles {
                                color: #B11E24;
                            }
                        }
                    }
                }
                
                .active_box {
                    margin-top: 0;
                }
            }
        }
    }

</style>
